<template>
  <div class="login-container">
    <background />

    <el-button
      ref="configButton"
      type="primary"
      style="width: 3rem; height: 3rem; top: 40%; right: 0.5rem"
      @click="themeSwitcherVisible = true"
    >
      <el-icon size="2rem">
        <Setting />
      </el-icon>
    </el-button>

    <theme-switcher
      v-model="themeSwitcherVisible"
      class="theme-switcher-button"
    />

    <div class="login-body">
      <div class="login-form-container" :style="formStyle">
        <transition name="fade" mode="out-in">
          <password-form
            v-if="loginType == 'password'"
            @captcha="captchaHandler"
            @login-success="loginSuccessHandler"
            class="login-form-body"
          />

          <sms
            v-else-if="loginType == 'email'"
            @captcha="captchaHandler"
            @login-success="loginSuccessHandler"
            class="login-form-body"
          />

          <face-login
            v-else-if="loginType == 'face'"
            @captcha="captchaHandler"
            @login-success="loginSuccessHandler"
            class="login-form-body"
          />
        </transition>
      </div>

      <div class="con-box left">
        <h2>欢迎使用</h2>
        <h2>
          <span>{{ title }}</span>
        </h2>
        <el-image :src="require('@/assets/img/logo.png')" />

        <p v-if="smsEnabled || faceEnabled">忘记密码？试试以下登录方式</p>
        <div>
          <el-button
            v-if="smsEnabled"
            text
            type="primary"
            @click="loginType = 'email'"
          >
            验证码登录
          </el-button>
          &nbsp;
          <el-button
            v-if="faceEnabled"
            text
            type="primary"
            @click="loginType = 'face'"
          >
            人脸登录
          </el-button>
        </div>
      </div>

      <div class="con-box right">
        <h2>欢迎使用<span>jaguar</span></h2>
        <br />
        <p>管理系统平台</p>
        <el-image :src="require('@/assets/img/logo.png')" />
        <el-button text type="primary" @click="loginType = 'password'"
          >密码登录</el-button
        >
      </div>

      <verify
        ref="verify"
        mode="pop"
        captchaType="blockPuzzle"
        @success="verifyCallback"
        :imgSize="{ width: '330px', height: '155px' }"
      />
    </div>
  </div>
</template>
<script>
import Background from './Background.vue'
import Verify from '@/components/Verifition/Verify'
import FaceLogin from './FaceLogin'
import PasswordForm from './PasswordForm'
import Sms from './Sms'

export default {
  name: 'Index',
  data() {
    return {
      loginType: 'password',
      verifyCallback: null,
      themeSwitcherVisible: false,
    }
  },
  computed: {
    title() {
      return window.clientName
    },
    formStyle() {
      return (
        'transform:' +
        (this.loginType == 'password' ? 'translateX(80%)' : 'translateX(0%)')
      )
    },
    faceEnabled() {
      return window.config.faceEnabled
    },
    smsEnabled() {
      return window.config.smsEnabled
    },
  },
  components: {
    Background,
    Verify,
    FaceLogin,
    PasswordForm,
    Sms,
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.configButton.$el.style.position = 'fixed'
    })
  },
  methods: {
    loginSuccessHandler(res) {
      this.$store.dispatch('loginUser/loginSuccess', res.headers.authorization)
    },
    captchaHandler(verifyCallback) {
      if (window.config.verifyCodeEnabled) {
        this.verifyCallback = verifyCallback
        this.$refs.verify.show()
      } else {
        verifyCallback()
      }
    },
  },
}
</script>
<style lang="scss">
.login-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #4b5563;

  .login-body {
    width: 720px;
    height: 415px;
    border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;

    .login-form-container {
      position: absolute;
      top: -10%;
      left: 5%;
      width: 360px;
      height: 500px;
      background-color: white;
      border-radius: 5px;
      box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2;
      transition: 0.5s ease-in-out;

      .login-form-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 70%;
        text-align: center;

        h2 {
          margin-bottom: 20px;
          text-transform: uppercase;
          letter-spacing: 5px;
        }

        .p-iconfield,
        input {
          width: 100%;
          height: 3rem;
        }

        button {
          width: 100%;
          height: 3rem;
          border-radius: 8px;
          letter-spacing: 4px;
        }
      }
    }

    .con-box {
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);

      h2 {
        font-weight: bold;
        letter-spacing: 3px;
        text-align: center;
        margin-bottom: 4px;
      }

      p {
        font-size: 12px;
        letter-spacing: 2px;
        text-align: center;
        margin-bottom: 4px;
      }

      img {
        width: 150px;
        opacity: 0.9;
        margin: 40px auto;
      }
    }

    .con-box.left {
      left: -2%;
    }

    .con-box.right {
      right: -2%;
    }
  }
}
</style>
